<template>
    <view class="viewport flex align-center justify-center">
        <view class="p-4 bg-white radius">
            <uv-qrcode ref="qrcode" :loading="loading" :start="false" :value="url" :options="options"></uv-qrcode>
            <view class="mt-4">
                <uv-button shape="circle" type="warning" @click="save" :loading="loading" :disabled="loading">保存二维码</uv-button>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import QRCodeStyleRound from '@/components/uqrcode.plugin.round.es'
import { ref } from 'vue'
import { onReady } from '@dcloudio/uni-app';
import { useMemberStore,useTenantSystemStore } from '@/stores'

const memberStore = useMemberStore()
const tenantStore = useTenantSystemStore()

const loading = ref(true)
const qrcode = ref()
const options = ref({
    style: 'round',
    // 指定二维码前景，一般可在中间放logo
    foregroundImageSrc: memberStore.profile?.avatar || `${window.location.origin}/content/app/default-avatar.png`
})

const url = ref(`${window.location.origin}/${tenantStore.state.pid}/?inviter=${memberStore.profile?.id}#/`)

onReady(() => {
    qrcode.value.registerStyle(QRCodeStyleRound)

    qrcode.value.make()

    loading.value = false
})

const save = ()=>{
    qrcode.value.save()
}



</script>
<style scoped>
page {
    height: 100%;
    overflow: hidden;
    background-color: #f7f7f8;
}

.viewport {
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
</style>